<!-- 好友列表 -->
<template>
  <div class="friendlist">
    <ul>
      <li v-for="(item,index) in searchedFriendlist" :key="index" class="frienditem">
        <div
          class="friend-info"
          :class="{ active: item.uid === selectFriendId }"
          @click="selectFriend(item.uid)"
        >
          <img class="avatar" width="36" height="36" :src="item.portrait ? item.portrait : img" />
          <div class="remark">{{item.alias == ''?item.displayName:item.alias}}</div>
        </div>
        <!-- <p>{{item}}</p> -->
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex"
import imgIcon from '../../assets/img/Icon1@2x.png'
import { _pullUserRequest, _getFriendsResult, _userResult, _version, _userRequest } from '../../pbApi/pb_WFCMessage'
import mqtt from '../../libs/mqtt'
import $ from 'jquery'
export default {
  data(){
    return {
      img: imgIcon
    }
  },
  computed: {
    // ...mapState(["selectFriendId", "searchText"]),
    ...mapState({
      selectFriendId: state => state.chat.selectFriendId,
      userId: state => state.chat.user.userId
    }),
    ...mapGetters(["searchedFriendlist"])
  },
  methods: {
    ...mapActions(["selectFriend"]),
    demo(){
      console.log(this.userId)
      mqtt.mqttPublish('GPGI',_pullUserRequest([_userRequest(this.userId)]),(data)=>{
          console.log("群：",data)
      })
      // var timestamp = (new Date()).valueOf() //1564992702798
      // console.log(timestamp)
      // mqtt.mqttPublish('FP',_version(timestamp),(data)=>{
      //     let friendList = _getFriendsResult(data)
      //     let list = []
      //     friendList.map(function(evt){
      //       list.push(_userRequest(evt.uid))
      //     })
      //     // mqtt.mqttPublish('UPUI',_pullUserRequest(list),(data)=>{
      //     //   let userInfo = _userResult(data)
      //     //   console.log("好友信息",userInfo)
      //     // })
      // })
    }
  },
  mounted(){
  }
};
</script>

<style lang="stylus" scoped>
.friendlist {
  height: 560px;
  overflow-y: auto;

  .frienditem {
    border-top: 1px solid #dadada;

    &:first-child, &.noborder {
      border-top: none;
    }

    .list_title {
      box-sizing: border-box;
      width: 100%;
      font-size: 12px;
      padding: 15px 0 3px 12px;
      color: #999;
    }

    .friend-info {
      display: flex;
      padding: 12px;
      transition: background-color 0.1s;
      font-size: 0;

      &:hover {
        background-color: rgb(220, 220, 220);
      }

      &.active {
        background-color: #c4c4c4;
      }

      .avatar {
        border-radius: 2px;
        margin-right: 12px;
      }

      .remark {
        font-size: 14px;
        line-height: 36px;
      }
    }
  }
}
</style>
